<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">{{msg}}</div>
  <script>

    /*
    vm的挂载:1.el:''值是元素或者选择器
    2.vm.$mount('')值是选择器或直接在new Vue写完后.$mount('')
    3.两者唯一的区别是$mount('')可以选择挂载时间,其他是一样的
    
    模板书写的位置:1.直接在容器中书写(vue会把容器的html作为模板,生成虚拟dom),在vm挂载之前作为普通的html元素
    2.在vm中书写配置项template,值是字符串,书写html模板,挂载时才会在浏览器中显示

    data的函数写法:为什么是函数不是对象
   组件被定义,data必须声明为一个返回初始对象的函数,因为组件可能被用来创建多个实例,如果data仍是一个纯粹的对象,则所有的实例将共享引用同一个数据对象,通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据


   插值语法:1.差值语法可以书写表达式,不能书写语句
   2.如果数据是null或undefined,在渲染时转为空串
    */
    Vue.config.productionTip = false
    const vm=new Vue({

      el:'#app',
      data(){
        return {
          msg:'hello Vue'
        }
      }
    })
  </script>
</body>
</html>